<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        .olPopupContent {
            font-size: smaller;
        }
    </style>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer, markerLayer, style, popup;
        

        function init(){
            map = new OpenLayers.Map('map', {maxResolution:'auto'});
            
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
            map.addLayer(layer);
            
            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            
            // create a property style that reads the externalGraphic url from
            // the thumbail attribute of the rss item
            style = new OpenLayers.Style({externalGraphic: "${thumbnail}"});
            
            // create a rule with a point symbolizer that will make the thumbnail
            // larger if the title of the rss item contains "powder"
            var rule = new OpenLayers.Rule({
                symbolizer: {pointRadius: 30},
                filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.LIKE,
                    property: "title",
                    value: "*powder*"
                })
            });
            rule.filter.value2regex("*");
            
            // If the above rule does not apply, use a smaller pointRadius.
            var elseRule = new OpenLayers.Rule({
                elseFilter: true,
                symbolizer: {pointRadius: 20}
            });
            
            style.addRules([rule, elseRule]);
            
            // Create a Vector layer with GeoRSS format and a style map.
            markerLayer = new OpenLayers.Layer.Vector("Some images from Flickr", {
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "xml/georss-flickr.xml",
                    format: new OpenLayers.Format.GeoRSS({
                        // adds the thumbnail attribute to the feature
                        createFeatureFromItem: function(item) {
                            var feature = OpenLayers.Format.GeoRSS.prototype.createFeatureFromItem.apply(this, arguments);
                            feature.attributes.thumbnail = this.getElementsByTagNameNS(item, "*", "thumbnail")[0].getAttribute("url");
                            return feature;
                        }
                    })
                }),
                strategies: [new OpenLayers.Strategy.Fixed()],
                // Giving the style map keys for "default" and "select"
                // rendering intent, to make the image larger when selected
                styleMap: new OpenLayers.StyleMap({
                    "default": style,
                    "select": new OpenLayers.Style({pointRadius: 35})
                })
            });
            map.addLayer(markerLayer);
            
            // control that will show a popup when clicking on a thumbnail
            var popupControl = new OpenLayers.Control.SelectFeature(markerLayer, {
              onSelect: function(feature) {
                  var pos = feature.geometry;
                  if (popup) {
                      map.removePopup(popup);
                  }
                  popup = new OpenLayers.Popup("popup",
                      new OpenLayers.LonLat(pos.x, pos.y),
                      new OpenLayers.Size(254,320),
                      "<h3>" + feature.attributes.title + "</h3>" +
                      feature.attributes.description,
                      true);
                  map.addPopup(popup);
              }
            }); 
            map.addControl(popupControl);
            
            popupControl.activate();
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">GeoRSS from Flickr in OpenLayers</h1>
    <div id="tags">
        georss, style, styling, marker, flickr, thumbnail, image, rule
    </div>

    <p id="shortdesc">
        Display a flickr-feed on top of the map
    </p>
    
    <div id="map" class="smallmap"></div>
    <div id="docs">
    <p>The displayed GeoRSS feed has a <tt>&lt;media:thumbnail/&gt;</tt> 
    property for each item. An extended <tt>createFeatureFromItem()</tt> 
    function is used to add this attribute to the attributes hash of each 
    feature read in by <tt>OpenLayers.Format.GeoRSS</tt>. The example is 
    configured with a style to render each item with its thumbnail image. 
    Also, to show how rules work, we defined a rule that if the title of an 
    rss item contains "powder", it will be rendered larger than the others.</p>
    </div>
  </body>
</html>
